<%--
  Created by IntelliJ IDEA.
  User: xiaoyou
  Date: 2021/12/1
  Time: 8:59
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <base href="<%=request.getContextPath()+"/"%>"/>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">

        function show(){
            $.post("BookServlet",{method:"findAll"},function (rs) {
                $("#tb").empty();
                $.each(rs,function (i,e) {
                    $("#tb").append(" <tr>\n" +
                        "         <th>"+e.bid+"</th>\n" +
                        "         <th>"+e.bname+"</th>\n" +
                        "         <th>"+e.bprice+"</th>\n" +
                        "         <th>"+e.dtdate+"</th>\n" +
                        "         <th>"+e.prod+"</th>\n" +
                        "         <th><a href='javascript:void(0)' onclick='rm("+e.bid+")'>删除</a></th>\n" +
                        "     </tr>")
                })
            },"json");
        }
         $(function () {

            show();


             //页面已经定义的按钮元素可以使用这种方式进行事件绑定
             //如果当前元素是通过JS/JQ动态添加的节点 这种方式不可以绑定事件
             /*$(".del").click(function () {
                 alert("删除");
             })*/
             // 父节点.on('事件名称','需要绑定的节点',function()...)
             $("#tb").on("click",".del",function () {
                 //我们把当前行id 赋值给alt属性
                 // $(this)代表的就是当前a节点对象
                 var id= $(this).attr("alt");
                 alert(id);
             })

         })
        
        function rm(id) {
             $.post("",{id:id},function (rs) {
                  if(rs>0){
                      //跳转页面操作是错误的 一定不要使用
                      //window.location.href="show.jsp";
                      //调用查询所有的方法
                      show();
                      //JQ的方法删除  remove();

                  }
             })
        }




    </script>
</head>
<body>
<center>

     <h3>图书查询</h3>
     <hr/>
     <table border="1px">
         <tr>
             <th>图书ID</th>
             <th>图书名称</th>
             <th>图书价格</th>
             <th>出版日期</th>
             <th>出版社</th>
             <th>操作</th>
         </tr>
         <tbody id="tb"></tbody>
     </table>

</center>
</body>
</html>
